function sel(){
	$.ajax({
	url:'http://localhost/atm-shop/api/select.php',
	mothed:'get',
	dataType:'json',
	crossDomain:true,
	success:(resp)=>{
		if(resp.code === 200){
			const { list } = resp.body
			let str = ''
			list.forEach((shop,index) => {
			  str += 
			  `
			    <tr data-id="${shop.id}">
			      <td>${index+1}</td>
			      <td><span>${shop.name}</span><input type="text" class="input-name"></td>
			      <td><span>${shop.price}</span><input type="text" class="input-price"></td>
			      <td><span>${shop.num}</span><input type="text" class="input-num"></td>
			      <td>
			        <button class="btn btn-xs btn-info btn-edit">编辑</button>
			        <button class="btn btn-xs btn-danger btn-del">删除</button>
			        <button class="btn btn-xs btn-success btn-ok">确定</button>
			        <button class="btn btn-xs btn-warning btn-cancel">取消</button>
			      </td>
			    </tr>
			  `
			})
			$('tbody').html(str)
		}
	}
})	
}
sel()

$('#btn-add').on('click',()=>{
	const name = $('#input-name').val(),
		price = $('#input-price').val(),
		num = $('#input-number').val()
	$.ajax({
		url:'http://localhost/atm-shop/api/add.php',
		mothed:'get',
		dataType:'json',
		crossDomain:true,
		data:{
			name:name,
			price:price,
			num:num
		},
		success:((resp)=>{
			if(resp.code === 200){
				$('#msgWrap').addClass('text-success')
				$('#msgWrap').html(resp.body.msg)
				setTimeout(()=>{
					$('#msgWrap').html(' ')
					$('#msgWrap').removeClass('text-success')
					hide()
					sel()
				},1500)
			}else{
				$('#msgWrap').addClass('text-danger')
				$('#msgWrap').html(resp.body.msg)
				setTimeout(()=>{
					$('#msgWrap').html(' ')
					$('#msgWrap').removeClass('text-danger')
					sel()
				},1500)
			}
		})
	})
})
$('#btn-cancel').on('click',()=>{
	hide()
})

function hide(){
	$('#myModal').on('hidden.bs.modal',(e)=>{
	$('#input-name').val(' ')
	$('#input-price').val(' ')
	$('#input-number').val(' ')
})
}
hide()

$('.tbody-list').on('click','button',function(){
	const $tr = $(this).parents('tr')
	if($(this).hasClass('btn-del')){
		const id = $tr.attr('data-id')
		$.ajax({
			url:'http://localhost/atm-shop/api/del.php',
			mothed:'get',
			dataType:'json',
			data:{id},
			crossDomain:true,
			success:(resp)=>{
				if(resp.code === 200){
					sel()
				}else{
					alert(resp.body.msg)
				}
			}
		})
	}else if($(this).hasClass('btn-edit')){
		$tr.addClass('edit').find('span').each(function(){
			$(this).next().val($(this).html())
			
		})	
	}else if($(this).hasClass('btn-cancel')){
		$tr.removeClass('edit')
	}else if($(this).hasClass('btn-ok')){
			 const name = $tr.find('.input-name').val()
			 const price = $tr.find('.input-price').val()
			 const num = $tr.find('.input-num').val()
			 const id = $tr.attr('data-id')
			 $.ajax({
				 url:'http://localhost/atm-shop/api/update.php',
				 dataType:'json',
				 mothed:'get',
				 crossDomain:true,
				 data:{
					 id:id,
					 name:name,
					 price:price,
					 num:num
				 },
				 success:(resp)=>{
					 if(resp.code === 200){
						setTimeout(()=>{
							sel()
						$tr.removeClass('edit')
						},500)
					 }
				 }
			 })
	}
})


			